<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易抽奖系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }

        .lottery-container {
            margin: 40px 0;
            padding: 30px;
            border: 2px solid #3498db;
            border-radius: 10px;
            background-color: #f8f9fa;
        }

        #result {
            font-size: 2.5em;
            font-weight: bold;
            color: #3498db;
            min-height: 60px;
            margin-bottom: 30px;
        }

        button {
            padding: 10px 20px;
            font-size: 1.2em;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s;
        }

        #start-btn {
            background-color: #2ecc71;
        }

        #start-btn:hover {
            background-color: #27ae60;
        }

        #stop-btn {
            background-color: #e74c3c;
            display: none;
        }

        #stop-btn:hover {
            background-color: #c0392b;
        }

        .names-list {
            margin-top: 20px;
            text-align: left;
        }

        .names-list h3 {
            margin-bottom: 10px;
        }

        .names-list ul {
            list-style: none;
            padding: 0;
            columns: 2;
            -webkit-columns: 2;
            -moz-columns: 2;
        }

        .names-list li {
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
<h1>简易抽奖系统</h1>

<div class="lottery-container">
    <div id="result">准备开始</div>
    <button id="start-btn">开始抽奖</button>
    <button id="stop-btn">停止抽奖</button>
</div>

<!--    <div class="names-list">-->
<!--        <h3>参与人员名单</h3>-->
<!--        <ul id="names-list"></ul>-->
<!--    </div>-->

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const resultElement = document.getElementById('result');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const namesListElement = document.getElementById('names-list');

        let isRunning = false;
        let interval;
        let names = [];

        // 从后端获取参与人员名单
        function fetchNames() {
            fetch('/api/lottery/names')
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.names) {
                        names = data.names;
                        renderNamesList();
                    } else {
                        alert('获取参与人员名单失败！');
                    }
                })
                .catch(error => {
                    console.error('获取名单出错:', error);
                    // alert('获取参与人员名单出错！');
                });
        }

        // 渲染参与人员列表
        function renderNamesList() {
            namesListElement.innerHTML = '';
            names.forEach(name => {
                const li = document.createElement('li');
                li.textContent = name;
                namesListElement.appendChild(li);
            });
        }

        // 开始抽奖
        startBtn.addEventListener('click', function () {
            if (names.length < 2) {
                alert('至少需要2名参与者！');
                return;
            }

            isRunning = true;
            startBtn.style.display = 'none';
            stopBtn.style.display = 'inline-block';

            // 快速切换显示的名字
            interval = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * names.length);
                resultElement.textContent = names[randomIndex];
            }, 100); // 每100毫秒切换一次
        });

        // 停止抽奖
        stopBtn.addEventListener('click', function () {
            if (!isRunning) return;

            clearInterval(interval);
            isRunning = false;
            startBtn.style.display = 'inline-block';
            stopBtn.style.display = 'none';

            // 发送请求到服务器获取最终结果
            fetch('/api/lottery/random', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    count: 1 // 只抽1个人
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.name) {
                        resultElement.textContent = data.name;

                        // 添加庆祝效果
                        resultElement.style.color = '#e74c3c';
                        setTimeout(() => {
                            resultElement.style.color = '#3498db';
                        }, 500);
                    } else {
                        alert('抽奖失败！');
                    }
                })
                .catch(error => {
                    console.error('抽奖出错:', error);
                    alert('抽奖出错！');
                });
        });

        // 初始化，获取名单
        fetchNames();
    });
</script>
</body>
</html>